<template>
	<view class="body">
		<view class="search">
			<u-collapse>
				<u-collapse-item :title="item.name" value="展开" v-for="(item,index) in search" :key="index">
					<view class="card">
						<view class="item tc" v-for="(e,i) in item.params" :key="i" @click="setAct(index,i)">
							<view class="icon mb5 mr20" v-if="e.value" :style="[{background:e.value}]"></view>
							<view :class="e.checked?'active':''" class="pt10 mt10 pb10 pl20 pr20 f22">{{e.name}}</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<view class="list pb20 mt30 pt10" v-if="list.length>0">
			<view class="d-b-c f-w p20">
				<view class="item bg-white" v-for="(item,index) in list" :key="index"
					@click="jump(`/pages/cats/detail?id=${item.id}`)">
					<image class="ww100" :src="item.pic" mode="aspectFit"></image>
					<view class="f28 p20">{{item.name}}</view>
				</view>
			</view>
			<u-loadmore line color="#fff" :status="status"></u-loadmore>
		</view>
		<u-empty v-else mode="list" marginTop="20vh"></u-empty>
		<view class="pos p20">
			<u-button text="重置筛选" color="#000" shape="circle" @click="clear"></u-button>
		</view>
		<dp-tabbar :opt="opt"></dp-tabbar>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				list: [],
				search: [],
				opt: {},
				status: 'loadmore',
				pagenum: 1
			}
		},
		methods: {
			jump(url) {
				app.goto(url)
			},
			clear() {
				this.search.map(item => item.params.map(e => e.checked = false))
				this.pagenum = 1
				this.list = []
				this.getList()
			},
			setAct(index, i) {
				// console.log(this.search);
				this.search[index].params.map(item => item.checked = false)
				this.search[index].params[i].checked = true
				this.pagenum = 1
				this.list = []
				this.getList()
			},
			getParam() {
				app.get('ApiShop/getParam', {}, (res) => {
					console.log(res);
					if (res.status == 1) {
						this.search = res.data
					}

				})
			},
			getList() {
				if (this.pagenum == 0) return
				this.status = 'loading'
				let param = []
				this.search.map(item => item.params.map(e => {
					if (e.checked) {
						let value = e.name
						if (e.value) value += `|${e.value}`
						param.push({ key: item.name, value })
					}
				}))
				app.post('ApiShop/getParamlists', {
					pagenum: this.pagenum,
					param,
				}, (res) => {
					if (res.status == 1) {
						this.list = this.list.concat(res.data)
						this.pagenum++
						if (res.data.length < 10) {
							this.status = 'nomore'
							this.pagenum = 0
						}

					}
				})
			},
			getdata: function() {
				var that = this;
				that.loading = true;
				app.get('ApiIndex/login', {
					pid: app.globalData.pid
				}, function(res) {
					that.loading = false;
					if (res.status == 0) {
						app.alert(res.mg);
						return;
					}
					if (res.loginset_type) {
						that.loginset_type = res.loginset_type
					}
					if (res.loginset_data) {
						that.loginset_data = res.loginset_data
					}
					that.logintype_1 = res.logintype_1;
					that.logintype_2 = res.logintype_2;
					that.logintype_3 = res.logintype_3;
					// #ifdef APP-PLUS
					if (that.platform2 == 'ios') {
						if (plus.runtime.isApplicationExist({
								pname: 'com.tencent.mm',
								action: 'weixin://'
							})) {
							console.log('已安装微信')
						} else {
							that.logintype_3 = false;
							console.log('未安装微信')
						}
					}
					// #endif
					that.logintype_4 = res.logintype_4;
					that.logintype_6 = res.logintype_6 || false;
					that.logintype_7 = res.logintype_7 || false;
					that.google_client_id = res.google_client_id || '';
					that.login_mast = res.login_mast;
					that.needsms = res.needsms;
					that.reg_invite_code = res.reg_invite_code;
					that.reg_invite_code_text = res.reg_invite_code_text;
					that.parent = res.parent;
					if (that.logintype == 0) {
						if (that.logintype_1) {
							that.logintype = 1; //注册登录
						} else if (that.logintype_2) {
							that.logintype = 2; //手机验证码登录
						} else if (that.logintype_3) {
							that.logintype = 3; //授权登录
						} else if (that.logintype_7 && that.alih5) {
							that.logintype = 3;
						}
					}
					that.xystatus = res.xystatus;
					that.xyname = res.xyname;
					that.xycontent = res.xycontent;
					that.xyname2 = res.xyname2;
					that.xycontent2 = res.xycontent2;
					that.logo = res.logo;
					that.name = res.name;
					that.platform = res.platform;
					if (that.platform == 'mp' || that.platform == 'wx' || that.platform == 'app') {
						that.platformname = '微信';
						that.platformimg = 'weixin';
					}
					if (that.platform == 'toutiao') {
						that.platformname = '抖音';
						that.platformimg = 'toutiao';
					}
					if (that.platform == 'alipay') {
						that.platformname = '支付宝';
						that.platformimg = 'alipay';
					}
					if (that.platform == 'qq') {
						that.platformname = 'QQ';
						that.platformimg = 'qq';
					}
					if (that.platform == 'baidu') {
						that.platformname = '百度';
						that.platformimg = 'baidu';
					}
					if (res.ali_appid) {
						that.ali_appid = res.ali_appid
					}
					that.loaded();
					// #ifdef H5
					if (that.logintype_6) {
						var hm = document.createElement('script');
						hm.src = "https://accounts.google.com/gsi/client";
						document.body.appendChild(hm);
						setTimeout(function() {
							google.accounts.id.initialize({
								client_id: that.google_client_id,
								callback: function(response) {
									console.log(response);
									var credential = response.credential;
									var base64Url = credential.split('.')[1];
									var base64 = base64Url.replace(/-/g, '+').replace(/_/g,
										'/');
									var jsonPayload = decodeURIComponent(
										window.atob(base64).split('').map(function(c) {
											return '%' + ('00' + c.charCodeAt(0)
												.toString(16)).slice(-2);
										}).join('')
									);
									var resdata = JSON.parse(jsonPayload);
									resdata.openId = resdata.sub;
									console.log(resdata);
									app.showLoading('提交中');
									app.post('ApiIndex/googlelogin', {
										userInfo: resdata,
										pid: app.globalData.pid
									}, function(res2) {
										app.showLoading(false);
										console.log(res2);
										if (res2.status == 1) {
											app.success(res2.msg);
											setTimeout(function() {
												console.log('frompage')
												console.log(that.frompage)
												app.goto(that.frompage,
													'redirect');
											}, 1000);
										} else if (res2.status == 3) {
											that.logintype = 5;
											that.isioslogin = false;
											that.isgooglelogin = true;
											that.login_setnickname = res2
												.login_setnickname;
											that.login_bind = res2.login_bind
										} else if (res2.status == 2) {
											that.logintype = 4;
											that.isioslogin = false;
											that.isgooglelogin = true;
											that.login_bind = res2.login_bind
										} else {
											app.error(res2.msg);
										}
									});
								}
							});
							google.accounts.id.renderButton(
								document.getElementById("googleloginBtn"), {
									theme: "outline",
									size: "large",
									width: '300'
								} // customization attributes
							);
							google.accounts.id.prompt();
						}, 500);
					} else if (that.logintype_7 && that.alih5) {
						const oScript = document.createElement('script');
						oScript.type = 'text/javascript';
						oScript.src =
							'https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js';
						document.body.appendChild(oScript);
					}
					// #endif
				});
			},

		},
		onLoad(opt) {
			this.opt = app.getopts(opt);
			this.getdata();
			this.getParam()
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.list {
		// background-color: #353535;

		.item {
			width: calc(50% - 10rpx);
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;

			image {
				height: 600rpx;
				display: block;
			}
		}
	}

	.card {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20rpx;
		justify-content: space-between;

		.active {
			background-color: #000;
			color: #fff;
			border-radius: 30rpx;
		}

		.icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			margin: 0 auto;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
		}
	}

	.pos {
		position: fixed;
		bottom: 180rpx;
		left: 50%;
		width: 100%;
		transform: translateX(-50%);
	}
</style>